import { FaPhone, FaEnvelope, FaLinkedin, FaGithub } from "react-icons/fa";
import styled from "styled-components";

const ContactList = styled.div`
  display: grid;
  gap: 1rem;
`;

const ContactItem = styled.a`
  display: flex;
  align-items: center;
  color: #34495e;
  text-decoration: none;
  transition: transform 0.2s;

  &:hover {
    transform: translateX(5px);
  }

  svg {
    margin-right: 10px;
    color: #3498db;
  }
`;

const ContactInfo = ({ user }) => {
  return (
    <ContactList>
      <ContactItem href={`tel:${user.phone}`}>
        <FaPhone /> {user.phone}
      </ContactItem>
      <ContactItem href={`mailto:${user.email}`}>
        <FaEnvelope /> {user.email}
      </ContactItem>
      <ContactItem href={user.linkedin} target="_blank">
        <FaLinkedin /> LinkedIn
      </ContactItem>
      <ContactItem href={user.github} target="_blank">
        <FaGithub /> GitHub
      </ContactItem>
    </ContactList>
  );
};

export default ContactInfo;
